<template>
    <div id="paper-ExaminationPaper">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            :fullscreen="true" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <!-- 试卷内容 -->
            <div class="paper-outer" :key="componentKey">
                <!-- 标题 -->
                <div class="paper-outer-title">
                    <div style="display: flex;justify-content: center;align-items:flex-end;">
                        <span style="font-size: 20px;font-weight: bold;">{{ paperName }}：总分（{{ totalNum }}）</span>
                        <span v-if="setStatus === 'detail'" style="color: #E6A23C;font-size: 18px;font-weight: bold;">用户得分：{{ scoreNum }}</span>
                        <span v-if="setStatus === 'detail'" style="margin-left: 20px;">姓名：{{ empName }}</span>
                        <span v-if="setStatus === 'detail'" style="margin-left: 10px;">部门：{{ orgName }}</span>
                    </div>
                    <el-button v-if="setStatus === 'detail'" @click="printHandel" class="icon-e" icon="ele-Printer" plain>在线打印</el-button>
                </div>
                <!-- 内容 -->
                <ul ref="contentToPrint">
                    <div v-for="item in paperCon" :key="item.l_SysUserId">
                        <li class="paper-topic">
                            <h4>{{item.n_Sort}}：{{ item.v_Topic }}
                                <span>（题型：{{ item.v_TypeName }}，单题分数：{{ item.n_Score }}）</span>
                                <i v-if="item.isCorrect === '1'"><el-icon color="#67C23A" :size="20"><Select /></el-icon></i>
                                <i v-if="item.isCorrect === '2'"><el-icon color="#F56C6C" :size="20"><CloseBold /></el-icon></i>
                            </h4>
                            <template v-if="item.n_Type !== 2">
                                <div  v-for="opIem in item.options" :key="opIem.id">
                                    <span class="paper-con-s">{{opIem.v_Option}}：{{opIem.v_Content}}</span>
                                </div>
                            </template>
                            <!-- 单选 -->
                            <div v-if="item.n_Type === 0" style="color: #4C4D4F; font-size: 12px;">
                                <el-radio-group :disabled="setStatus === 'detail' ? true : false" :readonly="setStatus === 'detail' ? true : false" v-model="item.radioVal" class="ml-4">
                                    <el-radio v-for="opIem in item.options" :key="opIem.id" :label="opIem.checkedVal" size="large">{{ opIem.v_Option }}</el-radio>
                                </el-radio-group>
                            </div>
                            <!-- 多选 -->
                            <div v-if="item.n_Type === 1" style="color: #4C4D4F; font-size: 12px;">
                                <el-checkbox :disabled="setStatus === 'detail' ? true : false" :readonly="setStatus === 'detail' ? true : false" v-for="opIem in item.options" :key="opIem.id" v-model="opIem.checkedVal" @change="checkChange(opIem.id,item.n_Sort,$event)" :label="opIem.v_Option" size="large" />
                            </div>
                            <!-- 判断 -->
                            <div v-if="item.n_Type === 2" style="color: #4C4D4F; font-size: 12px;">
                                <el-radio-group :disabled="setStatus === 'detail' ? true : false" :readonly="setStatus === 'detail' ? true : false" v-model="item.radioVal" class="ml-4">
                                    <el-radio label="true" size="large">对</el-radio>
                                    <el-radio label="false" size="large">错</el-radio>
                                </el-radio-group>
                            </div>
                        </li>
                    </div>
                </ul>
            </div>
            <template #footer>
                <el-button @click="cancelUseClick">关 闭</el-button>
                <el-button v-if="setStatus === 'exam'" type="primary" :loading="repeatDis" :disabled="repeatDis" @click="submitForm">确 定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive , toRefs , computed , watch , ref } from 'vue';
import { print } from '/@/utils/print.js';
interface PaperInfo {
  paperName: string;
  paperCon: any;
  titleCon: string;
  totalNum: Number;
  scoreNum: Number;
  empName: string;
  orgName: string;
}
export default defineComponent( {
    name: 'paper-ExaminationPaper',
    components: {},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        },
        setStatus: {
            type: String,
            default: ''
        },
    },
    setup(props,ctx){
        const paperInfo = reactive<PaperInfo>({
            paperName: '',
            paperCon: [],
            titleCon: '',
            totalNum: 0,
            scoreNum: 0,
            empName: '',
            orgName: '',
        });
        let paperArr: any = '';
        const componentKey:any = ref(0);
        const repeatDis = ref(false);
        const contentToPrint = ref(null);
        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                console.log(JSON.parse(props.repairInfo),'props.repairInfo');
                paperArr = JSON.parse(props.repairInfo).paperArr;
                repeatDis.value = false;
                if(props.setStatus === 'detail'){
                    paperInfo.scoreNum = 0;
                    let setNum = 0;
                    paperArr.map((i: any) => {
                        // n_Type 0 单选 1 多选 2 判断
                        setNum = setNum + i.n_GetScore;
                        if(i.isAnswerTrue) i.isCorrect = '1';
                        else i.isCorrect = '2';
                        if(i.n_Type === 0){ // 单选
                            i.options.forEach((item: any) => {
                                item.checkedVal = "id" + item.id;
                                if(item.isUserChoice){
                                    i.radioVal = item.checkedVal;
                                }
                            });
                        }
                        if(i.n_Type === 1){ // 多选
                            i.options.forEach((item: any) => {
                                item.checkedVal = item.isUserChoice;
                            });
                        }
                        if(i.n_Type === 2){ // 判断
                            if(i.examPaperDe[0].isUserChoice) i.radioVal = 'true';
                            else i.radioVal = 'false';
                        }
                    });
                    paperInfo.scoreNum = setNum;
                }else{
                    paperArr.map((i: any) => {
                        i.isCorrect = '0';
                        i.options.forEach(((item: any) => {
                            item.checkedVal = "id" + item.id
                        }));
                        // n_Type 0 单选 1 多选 2 判断
                        if(i.n_Type === 0 || i.n_Type === 2) i.radioVal = '';
                        if(i.n_Type === 1){
                            let setArr:any = []
                            i.options.map((j: any) => {
                                if(j.isTrue === true){
                                    setArr.push(j.id);
                                }
                            });
                            i.radioVal = setArr;
                            i.isChange = [];
                        }
                    });
                }
                console.log(paperArr,'paperArr')
                paperInfo.paperCon = paperArr;
                paperInfo.titleCon =  JSON.parse(props.repairInfo).titleCon + '题库';
                paperInfo.paperName = JSON.parse(props.repairInfo).titleCon;
                paperInfo.totalNum = JSON.parse(props.repairInfo).totalNum;
                paperInfo.empName = JSON.parse(props.repairInfo).empName;
                paperInfo.orgName = JSON.parse(props.repairInfo).orgName;
            }
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick()
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            componentKey.value = 0;
            ctx.emit('cancelPaperClick')
        }

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        /*** 考题对错判断回显 */
        const echoFun = async() => {
            for(let item:any = 0 ; item < paperArr.length ; item++){
                for(let i:any = 0 ; i < paperArr[item].options.length ; i++){
                    // 单选
                    if(paperArr[item].n_Type === 0){
                        if(paperArr[item].radioVal === paperArr[item].options[i].checkedVal) {
                            if(paperArr[item].options[i].isTrue){
                                paperArr[item].isCorrect = '1';
                                break;
                            }else{
                                paperArr[item].isCorrect = '2';
                                break;
                            }
                        }
                    }

                    // 多选
                    if(paperArr[item].n_Type === 1){
                        if(paperArr[item].isChange.length !== 0){
                            if(paperArr[item].isChange.length === paperArr[item].radioVal.length){
                                const allElementsPresent = paperArr[item].isChange.every((element:any) => paperArr[item].radioVal.includes(element));
                                if (allElementsPresent){
                                    paperArr[item].isCorrect = '1';
                                }else{
                                    paperArr[item].isCorrect = '2';
                                }
                            }else{
                                paperArr[item].isCorrect = '2';
                            }
                        }
                    }

                    // 判断
                    if(paperArr[item].n_Type === 2){
                        if(paperArr[item].radioVal === 'true' && paperArr[item].options[i].isTrue === true){
                            paperArr[item].isCorrect = '1';
                            break;
                        }else if(paperArr[item].radioVal === 'false' && paperArr[item].options[i].isTrue === true){
                            paperArr[item].isCorrect = '2';
                            break;
                        }
                    }
                }
            }
            paperInfo.paperCon = paperArr;
            componentKey.value += 1;
            repeatDis.value = false;
        }

        /*** submitForm 获取用户选中的数据 */
        const submitForm = async() => {
            repeatDis.value = true;
            await echoFun();
        }

        /*** 多选改变事件 */
        const checkChange = (i:any , j:any , e:any) => {
            console.log(i,j,e,'i,j,e')
            console.log(paperArr[j-1],'paperArr[j-1]')

            if(e) paperArr[j-1].isChange.push(i);
            else paperArr[j-1].isChange = paperArr[j-1].isChange.filter((item: any) => item !== i);
        }

        /*** 在线打印 */
        const printHandel = () => {
            if(contentToPrint.value){
                window.print();
            }
        }

        return {
            handleClose,
            cancelUseClick,
            isUseDialog,
            ...toRefs(paperInfo),
            submitForm,
            checkChange,
            componentKey,
            repeatDis,
            printHandel,
            contentToPrint,
        }
    },
} )
</script>
<style scoped lang="scss">
#paper-ExaminationPaper{
    :deep(.el-dialog__body){
        height: calc(100vh - 110px);
        max-height: none!important;
        overflow-y: auto;
    }
    // :deep(.el-dialog__body){
    //     height: 80vh;
    //     max-height: none!important;
    //     overflow-y: auto;
    // }
    .paper-outer{
        background-color: #FFFFFF;
        width: 60%;
        margin: auto;
        // height: 60vh;
        border-radius: 5px;
        padding: 20px;
        .paper-outer-title{
            margin: auto;
            width: 100%;
            padding-bottom: 10px;
            border-bottom: 1px dashed #6C6E72;
            h2{
                width: 100%;
                text-align: center;
                color: #39393A;
            }
        }
        ul,li{
            list-style: none;
            margin: 0;
            padding: 0;
            h4{
                display: fixed;
                align-items: center;
                color: #363637;   
                span{
                    color: #4C4D4F;
                    font-size: 12px;
                } 
            }
            .paper-con-s{
                display: block;
                color: #363637;
                padding: 5px 0; 
            }
        }
        .paper-topic{
            padding: 10px 0;
        }
    }
    :deep(.el-checkbox__inner) , :deep(.el-checkbox__label) , :deep(.el-radio__label){
        color: #2B2B2C;
    }
}
</style>